﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>选择时间和场次</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <!--公有引用-->
    <link rel="stylesheet" th:href="@{/css/weui.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui2.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui3.css}"/>
    <link rel="stylesheet" th:href="@{/css/mc_common.css}"/>
    <link rel="stylesheet" th:href="@{/css/selectTickets.css}"/>
    <link rel="stylesheet" th:href="@{/css/weui.min.css}"/>
    <div th:replace="head"></div>
</head>
<body>
<div data-role="page" class="page" id="selectTickets_page" data-dom-cache="false">
    <div id="tagnav" class="weui-navigator weui-navigator-wrapper">
        <ul class="weui-navigator-list date_item">
            <li th:each="pd : ${play.saleDates}"><a href="javascript:;" th:attr="data-id=${play.id}" class="weui_btn bg-gray-b weui_btn_inline" th:text="${pd}"></a></li>
        </ul>
    </div>
    <div class="weui_tab" style="height:44px;" id="floor">
        <div class="weui_navbar" style="height:44px;">
            <div class="weui_navbar_item tab-red">
                一楼
            </div>
            <div class="weui_navbar_item" th:onclick="'javascript:location.href=\'/h5/seat/' + ${play.id} + '/2\';'">
                二楼
            </div>
        </div>
    </div>
    <div class="seat_color">

    </div>

    <div id="selectTickets_page_main" data-role="main" class="">
        <div id="showBriefArea" class="eye" style="display:none">
            <div id="showBriefSeats">
                <canvas id="showBriefSeatsCan">Your browser does not support the canvas element</canvas>
            </div>
            <div id="showBriefBorder">

            </div>
        </div>
        <div class="selectTickets_states" align="center">
            <p class="selectTickets_states_g" style="margin: 0;"></p><font class="selectTickets_states_gl">已选</font>
            <p class="selectTickets_states_r" style="margin: 0;"></p><font class="selectTickets_states_rl">已售</font><br/>
            <p style="width:90%;height:2px;position:relative;z-index:0;background:rgb(255,89,37);top:0.5em"></p>
            <p style="position:relative;top:-0.5em;z-index:9;display:inline-block;font-size:0.9em !important;height:1.4em;line-height:1.4em;margin-top:0.3em;width:80%;border-radius:0.7em;background:rgb(255,89,37);color:#F00;text-shadow: 1px 1px 1px #FFF;">
                舞台</p>

        </div>
        <div id="gestureConParent" class="gestureConParent"
             style="width:100%;height:300px;overflow:hidden;white-space: nowrap !important; font-size: 0px !important;">
            <canvas id="gestureCon" class="gestureCon">
                Your browser does not support the canvas element
            </canvas>
        </div>
    </div>
</div>

    <div class="showSelectedTickets">
        <div id="showSelectedTicketsCon">

        </div>
    </div>
    <div class="weui-flex" style="position:fixed;bottom:0;width:100%">
        <!--<div id="ac" class="weui-flex-item order_l_bt" style="max-width: 10%; "><i class="icon icon-35"></i><span class="weui-badge" style="margin-bottom: 15px; ">3</span></div>-->
        <div class="weui-flex-item order_l_bt" style="max-width: 70%; ">应付总金额：<span class="f-red">¥<span
                id="selectTickets_price" class="f-red">0</span></span></div>
        <div class="weui-flex-item" style="max-width: 30%;">
            <a href="javascript:;" id="showSelectedBtn" th:attr="data-id=${play.id}"
                                                               class="weui_btn weui_btn_disabled weui_btn_warn noradius"
                                                               style=" height: 41px; line-height: 41px; overflow: hidden;">确认</a>
        </div>
    </div>
    <!--页面私有引用-->
    <script th:src="@{/js/jquery/jquery-1.7.2.min.js}"></script>
     <script th:src="@{/js/iscroll.js}"></script>
    <script th:src="@{/js/jquery/mc_common.js}"></script>
<script th:inline="javascript">
$(function () {
    var userId =[[${userId}]];
    //日期横向滚动
    TagNav('#tagnav', {type: 'scrollToFirst'});
    //选日期

    var seatSelect = [];//记录选择的座位
    var seatRowSize = 0;//座位高个数
    var seatColSize = 0;//座位宽个数
    var seatAble = [];
    var seatH = 20, seatW = 20;
    var gestureCon = document.getElementById("gestureCon");
    var context = gestureCon.getContext("2d");
    //初始化缩略图
    var briefSeatsCan = document.getElementById("showBriefSeatsCan");
    var briefSeatsCanCon = briefSeatsCan.getContext("2d");
    var seatLocationRecord;
    $(".date_item").on('click','a', function () {
        $(this).addClass('bg-orange-b').removeClass("bg-gray-b").parent().siblings().children().removeClass('bg-orange-b').addClass('bg-gray-b');
        var fn = $.loading('座位加载中');
        var me = $(this);
        var playId = me.data('id');
        var saleDate = me.text();
        $.ajax({
          type: "GET",
          url: "/h5/seats/"+playId,
          data: {saleDate:saleDate},
          complete : function(XHR, TS){
              fn.close();
              var response = {code : -1,msg:'system error'};
              try{
                  response = JSON.parse(XHR.responseText);
              }catch(e){;}
              if(response.code === 0){
                var seats = response.data;
                seatSelect = [];//记录选择的座位
                seatRowSize = seats.first.seatRowSize;//座位高个数
                seatColSize = seats.first.seatColSize;//座位宽个数
                seatAble = seats.first.seats;
                //重新定义画布大小
                $("#gestureCon").attr("width", seatColSize * (seatW + 2));
                $("#gestureCon").attr("height", seatRowSize * (seatH + 2));
                //重新定义缩略图大小
                $("#showBriefSeatsCan").attr("width", seatColSize * (seatW + 2));
                $("#showBriefSeatsCan").attr("height", seatRowSize * (seatH + 2));
                $("#showBriefArea").show();
                seatLocationRecord = $("#gestureCon").attr("width");
                initSeatLocation();
                clearSelected();
              }else{
                $.alert(response.msg,'提示');
              }
          }
        });
    }).find('a').first().trigger('click');
    var winWidth = document.documentElement.clientWidth;
    //容器高度
    $("#gestureConParent").height(winWidth * 0.75 + "px");
    //鹰眼高度
    $("#showBriefArea").height(winWidth * 0.75 / 3 + "px");
    $("#showBriefBorder").height(winWidth * 0.75 / 3 + "px");

    var recGroupID = [];
    var showHide_View;//显示和延时隐藏缩略图
	function clearSelected(){
		$("#showSelectedTicketsCon").empty();
		$("#selectTickets_price").html('0');
    }
	 //点击按钮发送请求
    $("#showSelectedBtn").on("click", function () {
        var me = $(this);
        if(me.text() !== '确认'){
            return;
        }
        var playDate = $(".date_item .weui-state-active .bg-orange-b");
        if (playDate.length === 0) {
            CommonFun.popMsg("selectTickets_page", "请选择观影日期");
            return;
        }
        if (seatSelect.length === 0) {
             CommonFun.popMsg("selectTickets_page", "请选择座位");
             return;
        }
        /*var floorTab = $("#floor .tab-red");
        if(floorTab.length == 0){
            CommonFun.popMsg("selectTickets_page", "请选择楼层");
             return;
        }*/
        var floor = 1;
        var selectedSeats = [];
        for (var idx in seatSelect) {
            selectedSeats.push({name:seatSelect[idx].seatName,seatId:seatSelect[idx].seatDefId,price:seatSelect[idx].seatPrice,floor:floor});
        }
        me.text('确认中..');
        var params = {};
        params.playId = me.data("id");
        params.playDate = playDate.text();
        params.seats = selectedSeats;
        params.userId = userId;
        $.ajax({
            type: "POST",
            url: "/wechat/precheck",
            data: JSON.stringify(params),
            dataType:"json",
            contentType : 'application/json;charset=utf-8',
            complete : function(XHR, TS){
                var response = {code : -1,msg:'system error'};
                try{
                    response = JSON.parse(XHR.responseText);
                }catch(e){;}
                if(response.code === 0){
                    location.href = "/wechat/order/" + response.data;
                }else{
                    me.text('确认');
                    CommonFun.popMsg("selectTickets_page", response.msg);
                }
            }
        });
    });
    var seatImgWhite;
	var screen = $("#gestureCon");
	screen.on('click',function(e) {
        var p = getEventPosition(e);
        // alert(JSON.stringify(p));
        //reDraw(p,context);

        var tempRate = parseInt($("#gestureCon").css("width")) / seatLocationRecord;
        seatColSize * (seatW + 2)
        var clickCol = Math.floor(p.x / ((seatW + 2) * tempRate));
        var clickRow = Math.floor(p.y / ((seatH + 2) * tempRate));
        //$("#showMsg123").html(clickCol+":"+clickRow);

        for (var idx in seatAble) {
            if (seatAble[idx].minRow - 1 <= clickRow && (seatAble[idx].minCol - 1 <= clickCol) && seatAble[idx].maxRow - 1 >= clickRow && seatAble[idx].maxCol - 1 >= clickCol) {
                if (seatAble[idx].seatValid == 0) {
                    return;
                }
                if (seatAble[idx].seatIsSale != 0) {
                    CommonFun.popMsg("selectTickets_page", "该座位已经被占用啦");
                    return;
                }

                var seatExitFlag = false;
                var seatExitIdx = 0;
                for (var m in seatSelect) {
                    if (seatSelect[m].minRow - 1 <= clickRow && (seatSelect[m].minCol - 1 <= clickCol) && seatSelect[m].maxRow - 1 >= clickRow && seatSelect[m].maxCol - 1 >= clickCol) {
                        seatExitFlag = true;
                        seatExitIdx = m;
                    }
                }
                console.log(seatExitFlag);
                var seatSizeRow = seatAble[idx].maxRow - seatAble[idx].minRow + 1;
                var seatSizeCol = seatAble[idx].maxCol - seatAble[idx].minCol + 1;

                if (seatExitFlag) {
                    console.log("seatAble[idx].cellBg:::::" + seatAble[idx].cellBg);
                    context.fillStyle = "#" + seatAble[idx].cellBg;
                    context.fillRect(clickCol * (seatW + 2), clickRow * (seatH + 2), seatW, seatH);
                    seatSelect.splice(seatExitIdx, 1);
                    if (seatSizeRow == 1 && seatSizeCol == 1) {
                        context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeRow - 2), ((seatH + 2) * seatSizeCol - 2));
                    } else {
                        context.fipagellRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeCol - 2), ((seatH + 2) * seatSizeRow - 2));
                    }
                } else {
                    if (seatSelect.length >= 6) {
                        CommonFun.popMsg("selectTickets_page", "亲，最多选取六个座位");
                        return;
                    }
                    context.fillStyle = "rgb(0,230,0)";
                    context.fillRect(clickCol * (seatW + 2), clickRow * (seatH + 2), seatW, seatH);
                    seatSelect.push(seatAble[idx]);
                    if (seatSizeRow == 1 && seatSizeCol == 1) {
                        context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeRow - 2), ((seatH + 2) * seatSizeCol - 2));
                    } else {
                        context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), ((seatW + 2) * seatSizeCol - 2), ((seatH + 2) * seatSizeRow - 2));
                    }

                }
                showSelectTicketList();
                if (seatAble[idx].seatGroupID != '0') {
                    break;
                }
            }
        }
    });
    var point1_X; var point1_Y; var point2_X; var point2_Y;//放大缩小的坐标
    var point1_S_X, point1_S_Y, point2_S_X, point2_S_Y;
    var startDistance, currentDistance;

    screen.on('touchstart', function (event) {
        var fingers = event.originalEvent.touches;

        if (fingers.length == 1) {
            point1_X = fingers[0].pageX;
            point1_Y = fingers[0].pageY;
        } else if (fingers.length == 2) {
            point1_S_X = fingers[0].pageX;
            point1_S_Y = fingers[0].pageY;
            point2_S_X = fingers[1].pageX;
            point2_S_Y = fingers[1].pageY;
            startDistance = Math.sqrt((point1_S_X - point2_S_X) * (point1_S_X - point2_S_X) + (point1_S_Y - point2_S_Y) * (point1_S_Y - point2_S_Y));
        }
        //event.stopPropagation();
        //event.preventDefault();
    });

    screen.on('touchmove', function (event) {
        var fingers = event.originalEvent.touches;
        if (fingers.length == 1) {
            var point1_X_M = fingers[0].pageX;
            var point1_Y_M = fingers[0].pageY;
            var distance_X = point1_X_M - point1_X;
            var distance_Y = point1_Y_M - point1_Y;
            //$("#ShowMsg123").html(distance_X);
            $("#gestureCon").css({ "left": parseInt($("#gestureCon").css("left")) + distance_X + "px", "top": parseInt($("#gestureCon").css("top")) + distance_Y + "px" });
            point1_X = point1_X_M;
            point1_Y = point1_Y_M;
        } else if (fingers.length == 2) {
            //缩放是最新坐标
            point1_X = fingers[0].pageX;
            point1_Y = fingers[0].pageY;
            point2_X = fingers[1].pageX;
            point2_Y = fingers[1].pageY;

            currentDistance = Math.sqrt((point1_X - point2_X) * (point1_X - point2_X) + (point1_Y - point2_Y) * (point1_Y - point2_Y)) / (Math.sqrt((point1_S_X - point2_S_X) * (point1_S_X - point2_S_X) + (point1_S_Y - point2_S_Y) * (point1_S_Y - point2_S_Y)));

            if (screen.width() <= winWidth && currentDistance <= 1) {
                var tempRateInner = winWidth / screen.width();
                screen.css("width", screen.width() * tempRateInner + "px");
                //screen.css("height",screen.height()*tempRateInner+"px");
            } else if (screen.width() >= winWidth * 8 && currentDistance >= 1) {
                screen.css("width", winWidth * 8 + "px");
            } else {
                screen.css("width", screen.width() * currentDistance + "px");
                //screen.css("height",screen.height()*currentDistance+"px");
            }
            //$("#showMsg123").html(screen.width()+currentDistance+"px");
            point1_S_X = point1_X;
            point1_S_Y = point1_Y;
            point2_S_X = point2_X;
            point2_S_Y = point2_Y;
        }
        //左移动不过界
        if (Math.abs(parseInt($("#gestureCon").css("left"))) >= Math.abs((parseInt($("#gestureCon").css("width")) - winWidth))) {
            $("#gestureCon").css({ "left": winWidth - parseInt($("#gestureCon").css("width")) + "px" });
        }
        //上移动不过界
        if (Math.abs(parseInt($("#gestureCon").css("top"))) >= Math.abs(parseInt($("#gestureCon").css("height"))) - parseInt($("#gestureCon").parent().css("height"))) {
            $("#gestureCon").css({ "top": (parseInt($("#gestureCon").parent().css("height")) - parseInt($("#gestureCon").css("height"))) + "px" });
        }
        //右移动不过界
        if (parseInt($("#gestureCon").css("left")) >= 0) {
            $("#gestureCon").css({ "left": "0px" });
        }
        //下移动不过界
        if (parseInt($("#gestureCon").css("top")) >= 0) {
            $("#gestureCon").css({ "top": "0px" });
        }
        var tempViewLeft = parseInt($("#gestureCon").css("left"));
        var tempViewTop = parseInt($("#gestureCon").css("top"));
        var tempViewWidth = parseInt($("#gestureCon").css("width"));
        var tempViewHeight = parseInt($("#gestureCon").css("height"));


        var tempViewRate = winWidth / parseInt($("#gestureCon").css("width"));
        var tempViewRateH = winWidth / parseInt($("#gestureCon").css("width"));
        //缩略图框
        $("#showBriefBorder").css({
            "left": -tempViewLeft * tempViewRate / 3 + "px",
            "top": -tempViewTop * tempViewRate / 3 + "px",
            "width": parseInt($("#showBriefSeats").css("width")) * tempViewRate - 1 + "px",
            "height": parseInt($("#showBriefSeats").css("height")) * tempViewRate - 1 + "px"
        });
        //显示和延时隐藏
        $("#showBriefArea").css("display", "block");
        clearTimeout(showHide_View);
        showHide_View = setTimeout(function () {
            $("#showBriefArea").css("display", "none");
        }, 3000);
        event.stopPropagation();
        //event.preventDefault();
    });

    screen.on('touchend', function (event) {
        var fingers2 = event.originalEvent.touches.length;
        //event.stopPropagation();
        //event.preventDefault();
    });
    //得到点击的坐标
    function getEventPosition(ev) {
        var x, y;
        if (ev.layerX || ev.layerX == 0) {
            x = ev.layerX;
            y = ev.layerY;
        } else if (ev.offsetX || ev.offsetX == 0) { // Opera
            x = ev.offsetX;
            y = ev.offsetY;
        }
        return { x: x, y: y };
    }
    //处理缩略图位置
    function dealbriefSeatsCan() {
        if ($("#showBriefSeatsCan").width() / parseInt($("#showBriefSeatsCan").height()) >= 4 / 3) {
            $("#showBriefSeatsCan").css("width", "100%");
            //alert(1);
        } else {
            //alert($("#showBriefSeatsCan").css("width"));
            $("#showBriefSeatsCan").css("height", "100%");
        }
        showHide_View = setTimeout(function () {
            $("#showBriefArea").css("display", "none");
        }, 3000);
    }
    //显示选中的座位
    function showSelectTicketList() {
        //<div class="showSelectedTicketsItem">5排2座</div>
        $("#showSelectedTicketsCon").empty();
        var countPrice = 0;
        if (seatSelect.length > 0) {
            $("#showSelectedBtn").removeClass("weui_btn_disabled");
        } else {
            $("#showSelectedBtn").addClass("weui_btn_disabled");
        }
        for (var idx in seatSelect) {
            $("#showSelectedTicketsCon").append($('<div class="showSelectedTicketsItem">' + seatSelect[idx].seatName + '</div>'));
            countPrice += parseInt(seatSelect[idx].seatPrice);
        }
        $("#selectTickets_price").html(countPrice);
    }
    function initSeatLocation() {
        // 绘制背景
        context.fillStyle = "#F1F1F1";
        context.fillRect(0, 0, gestureCon.width, gestureCon.height);
        // 绘制缩略图背景
        briefSeatsCanCon.fillStyle = "rgb(255,255,255)";
        briefSeatsCanCon.fillRect(0, 0, briefSeatsCanCon.width, briefSeatsCanCon.height);
        var seatImgGray = new Image();
        seatImgGray.src = "/images/seat_big_gray.png";
        var seatImgGreen = new Image();
        seatImgGreen.src = "/images/seat_big_green.png";
        seatImgWhite = new Image();
        seatImgWhite.src = "/images/seat_big_white.png";
        seatImgWhite.onload = function () {
            //context.drawImage(seatImg,10,10,10,10);
            //绘制格子
            //for(var r = 0;r<seatRowSize;r++){
            //for(var c = 0;c<seatColSize;c++){
            //context.drawImage(seatImgGray,c*(seatW+2),r*(seatH+2),seatW,seatH);
            //context.fillStyle = "rgb(230,230,230)";
            //context.fillRect(c*(seatW+2),r*(seatH+2),seatW,seatH);
            //缩略图
            //briefSeatsCanCon.fillStyle = "rgb(230,230,230)";
            //briefSeatsCanCon.fillRect(c*(seatW+2),r*(seatH+2),seatW,seatH);
            //}
            //}
            var tempRate = winWidth / $("#gestureCon").width();
            //$("#gestureCon").css("width",$("#gestureCon").width()*tempRate+"px");
            //$("#gestureCon").css("height",$("#gestureCon").height()*tempRate+"px");
            //绘制有效座位
            //seatLocationRecord = $("#gestureCon").width();
            //console.log("seatAble:",JSON.stringify(seatAble));
            for (var idx in seatAble) {

                var seatSizeRow = seatAble[idx].maxRow - seatAble[idx].minRow + 1;
                var seatSizeCol = seatAble[idx].maxCol - seatAble[idx].minCol + 1;
                /*  console.log(seatAble[idx].cellBg);
                 console.log(seatAble[idx].seatValid); */
                if (seatAble[idx].seatValid == 0) {
                    console.log("seatName:" + seatAble[idx].seatName + "&&&&&&");
                    context.font = "14px Arial";
                    var seatNameRoad = seatAble[idx].seatName;
                    if (seatNameRoad.length > 1) {
                        context.fillText(seatAble[idx].seatName, (seatAble[idx].minCol - 1) * (seatW + 2) + seatW / 8, (seatAble[idx].minRow) * (seatH + 2) - seatH / 5);
                    } else {
                        if (isNaN(seatNameRoad)) {
                            context.fillText(seatAble[idx].seatName, (seatAble[idx].minCol - 1) * (seatW + 2) + seatW / 8, (seatAble[idx].minRow) * (seatH + 2) - seatH / 5);
                        } else {
                            context.fillText(seatAble[idx].seatName, (seatAble[idx].minCol - 1) * (seatW + 2) + seatW / 3, (seatAble[idx].minRow) * (seatH + 2) - seatH / 5);

                        }
                    }

                    continue;
                }
                if (seatSizeRow == 1 && seatSizeCol == 1) {
                    //console.log("seatIsSale:",seatAble[idx].seatIsSale);
                    if (seatAble[idx].seatIsSale == 0) {
                        context.fillStyle = "#" + seatAble[idx].cellBg;
                        context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                        briefSeatsCanCon.fillStyle = "#" + seatAble[idx].cellBg;
                        briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);

                        context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                        briefSeatsCanCon.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                    } else {
                        context.fillStyle = "#444";
                        context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                        briefSeatsCanCon.fillStyle = "#444";
                        briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);

                        context.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                        briefSeatsCanCon.drawImage(seatImgWhite, (seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), seatW * seatSizeRow, seatH * seatSizeCol);
                    }
                } else {

                    if (recGroupID.indexOf(seatAble[idx].seatGroupID) > -1) {
                        continue;
                    } else {
                        recGroupID.push(seatAble[idx].seatGroupID);
                    }

                    if (seatAble[idx].seatIsSale == 0) {
                        context.fillStyle = "#" + seatAble[idx].cellBg;
                        context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                        briefSeatsCanCon.fillStyle = "#" + seatAble[idx].cellBg;
                        briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);
                    } else {
                        context.fillStyle = "#444";
                        context.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                        briefSeatsCanCon.fillStyle = "#444";
                        briefSeatsCanCon.fillRect((seatAble[idx].minCol - 1) * (seatW + 2), (seatAble[idx].minRow - 1) * (seatH + 2), (seatW + 2) * seatSizeCol - 2, (seatH + 2) * seatSizeRow - 2);

                    }
                }
            }
            $("#gestureCon").css("width", "100%");
            //$("#selectTickets_price").html(0);

            dealbriefSeatsCan();
        }
    }
});
</script>
</body>
</html>